<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		 
			
  
    <meta name="twitter:card" content="summary"/>
    
      <meta name="twitter:image" content="https://www.samrainhan.com/images/avatar.png" />
    
  
  
  <meta name="twitter:title" content="表单设计"/>
  <meta name="twitter:description" content="表单的元素 标签：告诉用户表单问题是什么； 输入框：供给用户填写答案信息； 动作：用户提交表单，即用户点击一个按钮或链接，执行一个操作； 帮助文字："/>
  
  
  
  
    <meta name="twitter:creator" content="@韩雨"/>
  



		
		<meta name="author" content="韩雨">
		<meta name="description" content="学习 &amp;nbsp;&amp;bull;&amp;nbsp; 生活">
		<meta name="generator" content="Hugo 0.52" />
		<title>表单设计 &middot; sam的小窝</title>
		<link rel="shortcut icon" href="https://www.samrainhan.com/images/favicon.ico">
		<link rel="stylesheet" href="https://www.samrainhan.com/css/style.css">
		<link rel="stylesheet" href="https://www.samrainhan.com/css/highlight.css">

		
		<link rel="stylesheet" href="https://www.samrainhan.com/css/font-awesome.min.css">
		

		
		<link href="https://www.samrainhan.com/index.xml" rel="alternate" type="application/rss+xml" title="sam的小窝" />
		

		
	</head>

    <body>
       <nav class="main-nav">
	
	
		<a href='https://www.samrainhan.com/'> <span class="arrow">←</span>Home</a>
	
	<a href='https://www.samrainhan.com/posts'>Archive</a>
	<a href='https://www.samrainhan.com/tags'>Tags</a>
	<a href='https://www.samrainhan.com/about'>About</a>

	

	
	<a class="cta" href="https://www.samrainhan.com/index.xml">Subscribe</a>
	
</nav>


        <section id="wrapper" class="post">
            <article>
                <header>
                    <h1>
                        表单设计
                    </h1>
                    <h2 class="headline">
                    Jul 9, 2016 00:00
                    · 998 words
                    · 2 minute read
                      <span class="tags">
                      
                      
                          
                              <a href="https://www.samrainhan.com/tags/form">form</a>
                          
                              <a href="https://www.samrainhan.com/tags/%E8%A1%A8%E5%8D%95">表单</a>
                          
                      
                      
                      </span>
                    </h2>
                </header>
                
                  
                    <div id="toc">
                      <nav id="TableOfContents">
<ul>
<li>
<ul>
<li><a href="#表单的元素-a-id-orgheadline7-a">表单的元素<a id="orgheadline7"></a></a></li>
<li><a href="#提高表单可用性-a-id-orgheadline18-a">提高表单可用性<a id="orgheadline18"></a></a>
<ul>
<li><a href="#信息内容的合理组织-a-id-orgheadline8-a">信息内容的合理组织<a id="orgheadline8"></a></a></li>
<li><a href="#简化表单-突出重点-a-id-orgheadline9-a">简化表单 突出重点<a id="orgheadline9"></a></a></li>
<li><a href="#清晰的浏览线-a-id-orgheadline10-a">清晰的浏览线<a id="orgheadline10"></a></a></li>
<li><a href="#考虑用户场景-保证主流程顺畅-a-id-orgheadline11-a">考虑用户场景 保证主流程顺畅<a id="orgheadline11"></a></a></li>
<li><a href="#选择合适的标签对齐方式-a-id-orgheadline12-a">选择合适的标签对齐方式<a id="orgheadline12"></a></a></li>
<li><a href="#提供帮助-a-id-orgheadline13-a">提供帮助<a id="orgheadline13"></a></a></li>
<li><a href="#智能默认-a-id-orgheadline14-a">智能默认<a id="orgheadline14"></a></a></li>
<li><a href="#即时反馈验证-a-id-orgheadline15-a">即时反馈验证<a id="orgheadline15"></a></a></li>
<li><a href="#额外输入-a-id-orgheadline16-a">额外输入<a id="orgheadline16"></a></a></li>
<li><a href="#其它方法-a-id-orgheadline17-a">其它方法<a id="orgheadline17"></a></a></li>
</ul></li>
</ul></li>
</ul>
</nav>
                    </div>
                  
                
                <section id="post-body">
                    

<h2 id="表单的元素-a-id-orgheadline7-a">表单的元素<a id="orgheadline7"></a></h2>

<ul>
<li>标签：告诉用户表单问题是什么；</li>
<li>输入框：供给用户填写答案信息；</li>
<li>动作：用户提交表单，即用户点击一个按钮或链接，执行一个操作；</li>
<li>帮助文字：为如何填写表单提供帮助；</li>
<li>输入反馈：针对用户输入给出反馈，输入正确还是错误；</li>
</ul>

<h2 id="提高表单可用性-a-id-orgheadline18-a">提高表单可用性<a id="orgheadline18"></a></h2>

<h3 id="信息内容的合理组织-a-id-orgheadline8-a">信息内容的合理组织<a id="orgheadline8"></a></h3>

<ul>
<li>考虑用户填写表单的目的，哪些表单需要填写，去掉没必要的表单项，确定完表单内容。</li>
<li>表单项并不是一个个从上到下无序罗列，而是根据表单内容，按照一定的逻辑，经过组织，分成不同的内容组，不同的主题。同时各个逻辑组和同一个主题的表单项，也是按照逻辑顺序或者用户熟悉的模式顺序，使用户浏览和填写自如。</li>
<li>如果表单过长时，也可拆解成不同网页，类似于任务拆解，让用户一步步填写。</li>
</ul>

<h3 id="简化表单-突出重点-a-id-orgheadline9-a">简化表单 突出重点<a id="orgheadline9"></a></h3>

<p>根据用户使用数据，适当将使用频次不高、或者提供给专业用户的高级表单项隐藏起来,保持表单的简洁，让绝大多数用户快速完成，避免大量的表单给用户的焦虑，而又满足了小众用户的需求。</p>

<h3 id="清晰的浏览线-a-id-orgheadline10-a">清晰的浏览线<a id="orgheadline10"></a></h3>

<p>由始至终提供清晰的浏览线。当提供了垂直单一路径，使用户减少注意力分散，可以迅速对问题作出回答，完成任务所花时间最少。</p>

<h3 id="考虑用户场景-保证主流程顺畅-a-id-orgheadline11-a">考虑用户场景 保证主流程顺畅<a id="orgheadline11"></a></h3>

<p>考虑用户场景，保证主流程不要中断，将导致人们放弃填写的元素解决。</p>

<h3 id="选择合适的标签对齐方式-a-id-orgheadline12-a">选择合适的标签对齐方式<a id="orgheadline12"></a></h3>

<ul>
<li>顶部标签方式，填表时间最短。</li>
<li>但如果尽量减少垂直面积，可以考虑右对齐方式。</li>
<li>如果希望用户填表时认真浏览标签，了解仔细考虑表单的每个输入框时，可以采用左对齐方式。</li>
</ul>

<h3 id="提供帮助-a-id-orgheadline13-a">提供帮助<a id="orgheadline13"></a></h3>

<p>常见的帮助，一般在标签或者输入框旁提供帮助文字，交互方式也有一直展现（即一直出现在输入框右侧、下方或输入框内）、即时帮助（即激活输入框时，帮助文字自动出现）、用户激活的即时帮助（即帮助信息默认不显示、用户鼠标悬浮触发帮助图标来显示帮助）、用户激活的区域帮助（将表单所有的帮助信息统一放在一个位置）等多种方式。</p>

<h3 id="智能默认-a-id-orgheadline14-a">智能默认<a id="orgheadline14"></a></h3>

<p>一般通过恰当设置满足大多数人需要的默认选择和数值，推送默认每个人都相同。还有个性化默认方式，它与表单对象相关。如京东购买的订单信息，智能默认与个人相关，不需要表单输入，默认之前的收货地址信息、支付配送方式、发票信息等，符合用户的需求习惯，同时避免了重复输入的成本。</p>

<h3 id="即时反馈验证-a-id-orgheadline15-a">即时反馈验证<a id="orgheadline15"></a></h3>

<p>即时验证分为多类反馈：确认输入合适、建议有效回答、核对输入信息，通过实时更新设计以帮助用户控制在必要的限制范围内。</p>

<h3 id="额外输入-a-id-orgheadline16-a">额外输入<a id="orgheadline16"></a></h3>

<p>额外输入可以提供更多选项或者高级选项，满足有需要的用户，同时不妨碍许需要的用户。</p>

<h3 id="其它方法-a-id-orgheadline17-a">其它方法<a id="orgheadline17"></a></h3>

                </section>
            </article>

            
                <a class="twitter" href="https://twitter.com/intent/tweet?text=https%3a%2f%2fwww.samrainhan.com%2fposts%2f2016-07-09-form-design%2f - %e8%a1%a8%e5%8d%95%e8%ae%be%e8%ae%a1 "><span class="icon-twitter"> tweet</span></a>

<a class="facebook" href="#" onclick="
    window.open(
      'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
      'facebook-share-dialog',
      'width=626,height=436');
    return false;"><span class="icon-facebook-rect"> Share</span>
</a>

            

            
                <div id="disqus_thread"></div>
<script type="text/javascript">
    var disqus_shortname = 'samrainblogbygithub'; 

     
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>

            

            
                <ul id="post-list" class="archive readmore">
    <h3>Read more</h3>

    
    
    
        <li>
            <a href="/posts/2019-04-26-c9-move-to-aws-c9/">Cloud9 Move to Aws C9<aside class="dates">Apr 26 2019</aside></a>
        </li>
    
        <li>
            <a href="/posts/2019-02-16-why-build-blog-with-cloud9/">2019 02 16 Why Build Blog With Cloud9<aside class="dates">Feb 16 2019</aside></a>
        </li>
    
        <li>
            <a href="/posts/2018-09-12-sports-stretching-best-practices/">运动拉伸最佳实践<aside class="dates">Sep 12 2018</aside></a>
        </li>
    
        <li>
            <a href="/posts/2018-09-12-add-2-files-to-tempdb-for-caching/">给tempdb加2个文件做缓存<aside class="dates">Sep 12 2018</aside></a>
        </li>
    
        <li>
            <a href="/posts/2018-09-12-look-for-sql-server-tables-without-a-clustered-index/">如何找到没有聚集索引的表<aside class="dates">Sep 12 2018</aside></a>
        </li>
    
        <li>
            <a href="/posts/2018-09-12-the-continuous-delivery-maturity-model/">持续实施成熟度模型<aside class="dates">Sep 12 2018</aside></a>
        </li>
    
        <li>
            <a href="/posts/2018-09-12-map-of-continuous-delivery/">持续发布的各个阶段<aside class="dates">Sep 12 2018</aside></a>
        </li>
    
        <li>
            <a href="/posts/2018-09-12-how-dropbox-securely-stores-your-passwords/">Dropbox的用户密码加密机制<aside class="dates">Sep 12 2018</aside></a>
        </li>
    
        <li>
            <a href="/posts/2018-09-12-code-inspection-tool-for-net/">NET代码检查工具<aside class="dates">Sep 12 2018</aside></a>
        </li>
    
        <li>
            <a href="/posts/2018-09-12-how-to-make-unique-id/">怎样生成唯一ID<aside class="dates">Sep 12 2018</aside></a>
        </li>
    
</ul>

            

            <footer id="footer">
    
        <div id="social">

	
	
    <a class="symbol" href="">
        <i class="fa fa-facebook-square"></i>
    </a>
    
    <a class="symbol" href="https://github.com/samrain">
        <i class="fa fa-github-square"></i>
    </a>
    
    <a class="symbol" href="">
        <i class="fa fa-twitter-square"></i>
    </a>
    


</div>

    
    <p class="small">
    
       © Copyright 2019 <i class="fa fa-heart" aria-hidden="true"></i> 韩雨
    
    </p>
    <p class="small">
        Powered by <a href="http://www.gohugo.io/">Hugo</a> Theme By <a href="https://github.com/nodejh/hugo-theme-cactus-plus">nodejh</a>
    </p>
</footer>

        </section>

        <script src="https://www.samrainhan.com/js/jquery-3.3.1.min.js"></script>
<script src="https://www.samrainhan.com/js/main.js"></script>
<script src="https://www.samrainhan.com/js/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>




  
<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
	ga('create', 'UA-37708730-1', 'auto');
	
	ga('send', 'pageview');
}
</script>





    </body>
</html>
